(function($) {
	//扩展jQuery的插件
	$.fn.extend({
		"jqSearchBar": function(obj) {
			//定义一个J变量，使layui中的时间空间根据数据动态显示多个
			var j = 0;
			//初始化bootstrap multiselect并设置宽度，默认没有选中的文字
			$(document).ready(function() {
				//设置下拉菜单的一些属性
				$('.btn-group').css({
					"margin": "10px",
					"float": "left"
				});
				//layui时间插件的调用
				lay('#version').html('-v' + laydate.v);
				laydate.render({
					elem: '#contracttime' + j + '',
					type: 'datetime'
				})
			});
			//定义that使this指向不发生改变，此时指向使用此插件的元素本身
			var that = $(this);
			//设置使用的元素的大小，默认为宽度200，高度150
			that.css({
				"width": "" + obj.width + "",
				"height": "" + obj.height + ""
			})
			//定义变量objModel接受数据，此变量接受的是设置的值，也就是要显示的东西
			var objModel = obj.colModel;
			//循环遍历数据，取到其中的type的值进行判断然后添加对应的input或者select或者date
			objModel.map(function(val, index) {
				//根据传入type类型判断，如果是input类型，在使用元素后加input框
				if(val.type == "input") {
					that.append("<input class='form-control' type='text' name='" + val.name + "' id='" + val.name + "' style='width:" + val.width + "px;float:left;margin:10px;' placeholder='请输入文字'>");
				}
				//根据传入type类型判断，如果是select类型，在使用元素后加select框
				if(val.type == "select") {
					//判断type类型是select的时候，首先动态创建select
					that.append("<select id='example-single" + val.name + "' class='form-control' multiple='multiple'></select>");
					//在判断完成之后，动态的重置bootstrap multiselect
					$('#example-single' + val.name + '').multiselect({
						enableFiltering: true,
						buttonWidth: 'val.width',
						nonSelectedText: "请选择"
					});
					//设置下拉菜单的一些属性
					$('.btn-group').css({
						"margin": "10px",
						"float": "left"
					});
					//通过请求动态更改下拉列表的显示内容
					$.ajax({
						url: val.url,
						success: function(r) {
							var rData = r.data;
							$.each(rData, function(index, city) {
								$('#example-single' + val.name + '').append('<option value="' + city.id + '">' + city.title + '</option>');
							});
							var newRdata = new Array();
							var obj = new Object();
							$.each(rData, function(index, city) {
								obj = {
									label : city.title,
									title:city.title,
									value: city.id
								};
								newRdata.push(obj);
							});
							$('#example-single' + val.name + '').multiselect('dataprovider', newRdata);
							$('#example-single' + val.name + '').multiselect('refresh');
						}
					})
				}
				//根据传入type类型判断，如果是date类型，在使用元素后加date框
				if(val.type == "date") {
					lay('#version').html('-v' + laydate.v);
					laydate.render({
						elem: '#contracttime' + j + '',
						type: 'datetime'
					})
					//j++使j依次递增，实现动态id
					j++;
					that.append("<input class='form-control' id='contracttime" + j + "' type='text' style='width:" + val.width + "px;float:left;margin:10px;' placeholder='搜索时间' />");
				}
			})
		}
	});
	//使用$.extend扩展添加到$.jqSearchBar这个扩展的方法中
	$.extend($.jqSearchBar, {
		colModel: [],
		height: 150,
		width: 200,
		datatype: "xml"
	});
})(jQuery);